<template>
  <div class="shopstore">
    <div class="shop-top">
      <van-tree-select
        height="100%"
        :items="items"
        :main-active-index.sync="active"
      >
        <template #content>
          <div
            class="shopBox"
            v-for="(item, index) in items"
            :key="item.goodsId"
          >
            <div
              class="img-box"
              v-if="active === index"
            >
              <img
                class="banners"
                :src="item.banners"
                alt=""
              />
              <!-- <div
                v-for="price in items[index].goodsPrice"
                :key="price.id"
              > -->
              <van-card
                v-for="img1 in items[index].goodsBannerImg"
                :key="img1.id"
                num="2"
                :price="item.price"
                :title="item.title"
                :thumb="img1"
              />
              <!-- </div> -->
            </div>
          </div>
        </template>
      </van-tree-select>
    </div>
  </div>
</template>
<script>
import { shopDetails } from '@/api/mine';
export default {
  data() {
    return {
      active: 0,
      items: [],
      itemImgs: [],
    };
  },
  created() {
    this.shopDetails();
  },
  methods: {
    async shopDetails() {
      const res = await shopDetails();
      this.items = res.data;
    },
  },
};
</script>
<style lang="scss">
.shopstore {
  margin-top: 46px;
  .shop-top {
    .img-box {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 100%;
      .banners {
        width: 100%;
        height: 200px;
      }
      .van-card {
        width: 100%;
        height: 70px;
        .van-card__thumb {
          width: 55px;
          height: 55px;
        }
        .van-card__content {
          min-height: 55px;
        }
      }

      .van-grid-item__icon {
        font-size: 109px;
      }
    }
  }
}
</style>
